<template>
	<view>
		<view class="ly-search">
			<input v-model="filterText" :placeholder="placeholder"/>
		</view>
		<view class="showTreeBox">
			<view class="ly-button-wrapper">
				<button @tap="setCheckAll">{{isCheckAll ? '取消全选': '全选'}}</button>
				<button class="ly-button" @tap="getCheckedKeys()">确定</button>
			</view>
			
			<ly-tree :tree-data="treeData"
				node-key="nid" 
				:showCheckbox="showCheckbox"
				:showRadio="showRadio"
				:defaultExpandAll="defaultExpandAll"
				:props="defaultProps" 
				:filter-node-method="filterNode" 
				@check="handleCheck"
				ref="tree"
				:currentNodeKey="currentNodeKey"
				:model="Vmodel"
				>
			</ly-tree>
		</view>
	</view>
</template>

<script>
	import LyTree from '@/components/ly-tree-nvue/ly-tree.vue'
	let currentNodes = '';
	export default {
		components: {
			LyTree
		},
		props:{
			// current:{
			// 	type:Number,
			// 	default (){
			// 		return 
			// 	}
			// },
			treeData:{
				type:Array,
				default (){
					return []
				}
			},
			defaultProps:{
				type:Object,
				default (){
					return
				}
			},
			model:{
				type:String,
				default (){
					return 
				}
			}
		},
		data() {
			return {
				placeholder: this.depPlaceholder,
				filterNodeData: null,
				filterText: '',
				values: [],
				show: false,
				showCheckbox: true,/* 多选框 */
				showRadio: false, /* 单选框*/
				defaultExpandAll: false,
				isCheckAll: false,
				currentNodeKey:'',
				Vmodel:this.model,
				Vmodels:[]
			};
		},
		mounted() {
			this.Vmodels.push(this.Vmodel);
		},
		watch: {
			Vmodels(newData,oldData){
				// console.log(oldData)
			},
			
			
			filterText(val) {
				// console.log(val)
				this.$refs.tree.filter(val, this.filterNodeData);
			}
		},
		
		// 如果不需要不用到这些方法，需要删除相应代码，打印大量日志会造成性能损耗
		methods: {	
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			
			handleCheck(obj) {
				currentNodes = obj;
				if(this.showCheckbox){
					if (obj.node.checked) {
						this.values.push(obj.data.label);
						this.placeholder = this.values.toString()
						// this.filterNodeData = obj.data;
						// // console.log(obj.data)
					}
					if(!obj.node.checked){
						// console.log(obj)
						let Newval = this.values;
						if(obj.checkedKeys.length == 0){
							Newval.splice(0,Newval.length)
							this.placeholder = Newval.toString();
							return
						}
						for(let i =0;i<Newval.length;i++){
							if(Newval[i] == obj.data.label){
								Newval.splice(i,1);
							}
						}
						this.placeholder = Newval.toString()
					}
				} else{
					this.placeholder = `过滤"${obj.data.label}"的子节点`;
					// this.filterNodeData = obj.data;
				}
				
				this.$refs.tree.filter(this.filterText,this.filterNodeData);
			},
			
			getCheckedKeys(e){
				this.$emit("treeClick",this.placeholder,this.Vmodel,currentNodes)
			}
		}
	};
</script>

<style scoped>
	.ly-search {
		margin: 0 30rpx;
		margin-top: 40rpx;
		padding-bottom: 15rpx;
		border-bottom-color: #ededed;
		border-bottom-style: solid;
		border-bottom-width: 1rpx;
	}
	
	.ly-input {
		color: #333;
		font-size: 30rpx;
		width: 100%;
	}
	
	.ly-button-wrapper{
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
	}
</style>
